<template>
  <div calss="tab-bar">
    <van-tabs
      v-model="active"
      :offset-top="55"
      :border="false"
      animated
      sticky
      swipeable
      type="line"
      title-active-color="#ee0a24"
    >
      <!-- tabbarItem -->
      <van-tab v-for="(item, index) in tabItem" :key="index">
        <template #title>
          <span>{{ item }}</span>
        </template>
        <tabbar-item-list  v-if="index %2 === 0" :productList="flashSaleProductsList" v-on="$listeners"/>
        <tabbar-item-list  v-else :productList="tabbarProductList" v-on="$listeners"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import TabbarItemList from './TabBarItemList'
export default {
  name: 'TabBar',
  props: {
    flashSaleProductsList: {
      type: Array,
      default: () => []
    },
    tabbarProductList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      active: 0,
      tabItem: ['全部', '晚餐', '人气', '心选']
    }
  },
  components: {
    TabbarItemList
  }
}

</script>
<style lang='scss' scoped>
.tab-bar {
  width: 100%;
}
</style>
